<template>
  <div class="accion">
    <el-tabs>
      <el-form :model="formInline">
        <el-form-item>
          <el-input v-model="formInline.Text" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
         <!-- 管理员分类查询 -->
         <el-form-item prop="desc" v-if="this.lastname == 'cms'">
          <div class="block">
            <span></span>
           <el-cascader
           placeholder="请选择分类" 
              v-model="formInline.values"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"></el-cascader>
          </div>
        </el-form-item>
         <!-- 商户分类查询 -->
        <el-form-item prop="desc" v-else>
          <div class="block">
            <span></span>
            <el-select v-model="formInline.values" placeholder="请选择分类" @change="handleChange">
          <el-option
          v-for="item in options"
          :key="item.name"
          :label="item.name"
          :value="item.name +'?'+ item.id"
       >
     </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.region"
            placeholder="请选择状态"
            style="width: 100%"
          >
            <el-option label="已上架" value="Shelve"></el-option>
            <el-option label="已下架" value="UnShelve"></el-option>
            <el-option label="待上架" value='null'></el-option>
          </el-select>
        </el-form-item>
        <el-button class="el-staye" @click="heack()">搜索</el-button>
        <el-button class="acctive" @click="empty">重置</el-button>
      </el-form>
      <el-table :data="list" style="width: 100%">
        
        <el-table-column label="商品名称" prop="title" width="120">
        </el-table-column>
        <el-table-column label="商品图片" width="120">
          <template v-slot="{ row }">
            <el-image :src="row.mainImages[0]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品品牌" prop="attributes[0].value">
        </el-table-column>
        <el-table-column label="产地" prop="attributes[1].value">
        </el-table-column>
        <el-table-column label="商品规格" prop="specs[0].name">
        </el-table-column>
        <el-table-column label="商品单价" prop="specs[0].costPrice">
        </el-table-column>
        <el-table-column label="库存" prop="specs[0].number"></el-table-column>
        <!-- <el-table-column label="销量" prop="reject"> </el-table-column> -->
        <el-table-column label="状态" style="width: 180px">
          <template v-slot="{ row }">
            <el-tag     
              :type="
                row.status === 'Shelve'
                  ? 'success'
                  : 'info' && row.status === 'WaitAudit'
                  ? 'danger'
                  : 'info' && row.status == null
                  ? 'warning'
                  : 'info'
              "
              disable-transitions
            >
              {{ formatEmployment(row.status) }}
            </el-tag>
            <!-- <el-tag
                 v-if="
                row.rejectDesc == null ||
                row.rejectDesc == '' ||
                row.status != 'UnShelve'"></el-tag>
            <el-tag class="tailuo" type="danger" v-else>审核拒绝</el-tag>
            <br />
            <el-popover
              title="拒绝原因"
              placement="top"
              width="10px"
              trigger="click"
              :content="row.rejectDesc"
              v-show="
                row.rejectDesc != null &&
                row.rejectDesc &&
                row.status == 'UnShelve'
              "
            >
              <el-button
                class="mengbiyousi"
                type="text"
                size="mini"
                slot="reference"
                >拒绝原因</el-button
              >
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column  fixed="right" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              :disabled="row.status != 'Shelve' ? false : true"
              type="text"
              size="small"
              @click="heact(row)"
              >编辑</el-button
            >
            <el-button
              v-show="row.status != 'Shelve'" 
              :disabled="row.status == 'WaitAudit' ? true : false"
              type="text"
              size="small"
              @click="chonge(row)"
            >
              上架
            </el-button>
            <el-button
              v-show="row.status == 'Shelve'"
              
              type="text"
              size="small"
              @click="chongese(row)"
            >
              下架
            </el-button>
            <el-button
              :disabled="row.status != 'UnShelve' ? true : false" 
              type="text"
              size="small"
              @click="rousevn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>
<script>
import { delcommodity, loginlist, grounding, grounlogin, logincx } from "@/api/login";
import {second,classification,ification} from '@/api/user'
import arrayToTree from "array-to-tree";

import employeesConst from "@/constant/employees";

const hireTypeMap = {};
employeesConst.hireType.forEach((item) => {
  hireTypeMap[item.status] = item.value;
});

const defaultArr = [
             {
                name: "checkReportbrand",
                value: "",
              },
              {
                name: "checkReportplace",
                value: "",
              },
              {
                name: "checkReportImages",
                value: "",
              },
              {
                name: "checkReportunit",
                value: "",
              },
];

export default {
  data() {
    return {
      lastname: "",
      matching:'',
      vce: [
        {
          id:'',
          desc: "",
          level: Number,
        },
        {
          id:'',
          desc: "",
          level: Number,
        },
      ],
      options: [],
      list: [],
        
      q:{
        index: 1,
        size: 10,
        searchText: "",
        status: null,
        categories: [],
      },
       z:{
        index: 1,
        size: 10,
        searchText: "",
        categories: [],
      },
      formInline: {
        Text: "",
        genre: "",
        name: "",
        region: null,
        values: "",
      },
      formlist: [],
    };
  },
  created() {
    this.loachonlist();
    this.loamengdiyoushi();
  },
  methods: {
    async loachonlist() {
      this.lastname = this.$cookies.get("name");
      const res = await loginlist(this.q);
      this.list = res.data.data;
      
      this.list.map((value) => {
        const { attributes } = value;
   
        if (attributes.length<4) {
          value.attributes = defaultArr;
        } else{
          return
        }

        defaultArr.map(value=>{
          let exists = false;
          for (const attribute in attributes) {
            const{name} = attribute;
            if(name === value.name){
              exists= true;
              break;
            }
          }

          if (!exists){
            attributes.push(value);
          }
        });
      });
      // console.log(this.list);
      // console.log(this.imagedata);
      // 刚进页面刷新一下
    // if(location.href.indexOf("#reloaded") !=-1){
    //     location.href=location.href+"#reloaded";
    //     location.reload();
    // }
    },
    //  分类获取
    async loamengdiyoushi() {
     
      // 管理员分类
      if(this.lastname == 'cms'){
          const resw = await classification()
             for(let i = 0; i < resw.data.length; i++){
             this.options.push({
             label:resw.data[i].name,
             id:resw.data[i].id,
             value:{id:resw.data[i].id, desc:resw.data[i].name},
             parentId:resw.data[i].parentId,
             top:resw.data[i].top,
             iconUrl:resw.data[i].iconUrl
            })
         }
         const treedata = arrayToTree(this.options,{
         parentProperty:"parentId",
         customID:"id"
          })
          this.options = treedata
      }else {
        const resw = await second();
       this.options = resw.data

        const res = await ification()
        const aa = res.data
        aa.forEach(item=>{

          if(this.options[0].parentId == item.id){
             this.matching = item
          }
        })
      }

    },
handleChange(value){
  if(this.lastname == 'cms'){
    this.q.categories = value
    this.q.categories[0]['level'] = 1
    this.q.categories[1]['level'] = 2
  }
    console.log(value);
},
    // 搜索
   async heack() {
      // console.log('745',this.formInline.values[1]);
      
      if(this.lastname != 'cms'){
       this.vce[0].id = this.matching.id
       this.vce[0].desc = this.matching.name
       this.vce[1].id = this.formInline.values.split('?')[1];
       this.vce[1].desc = this.formInline.values.split('?')[0];
      if (this.formInline.values != "") {
        this.vce[0].level = 1;
        this.vce[1].level = 2;
        this.q.categories = this.vce;
      }      
      }

       if (this.formInline.region == "null") {
         if (this.formInline.values != "") {
       this.vce[0].level = 1;
        this.vce[1].level = 2;
        this.z.categories = this.vce;
      }
        this.z.searchText = this.formInline.Text;
           const res = await logincx(this.z)
           this.list = res.data.data
           return
      }
          if (this.q.status == "") {
        this.q.status = null;
      }
      this.q.searchText = this.formInline.Text;
      this.q.status = this.formInline.region;
      this.q.index = 1
      this.z.index = 1
      this.loachonlist();
    },
    // 重置
    empty() {
      this.vce[0].id = ''
      this.vce[1].id = ''
      this.vce[0].desc = ''
      this.vce[1].desc = ''
      this.vce[0].level = Number;
      this.vce[1].level = Number
      this.q.index = 1
      this.q.searchText = "";
      this.z.searchText = "";
      this.q.status = null;
      this.q.categories = [];
      this.z.categories = [];
      this.formInline.Text = "";
      this.formInline.values = "";
      this.formInline.region = null;
      this.loachonlist();
    },
    heact(row) {
      console.log(row);
      this.$router.push({
        path: "/home/acctcpeol",
        query: { row,region: {
            province: "",
            city: "",
            county: ""
           }},
      });
    },
    // 上架
    chonge(row) {
      this.$confirm("您确认上架?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("commodityId", row.commodityId); //
          const res = await grounding(params);
           if (this.formInline.region == "null") {
             const res = await logincx(this.z)
           this.list = res.data.data
          this.$message.success(res.msg);
           return
           }
             this.loachonlist();
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
        .catch(() => {});
    },
    // 下架
    chongese(row) {
      this.$confirm("您确定要下架么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const params = new URLSearchParams();
        params.append("commodityId", row.commodityId);
        const res = await grounlogin(params);

        if (res.code !== 200) return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.loachonlist();
      });
    },
    // 删除
    rousevn(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.doDoel(row);
        })
        .catch(() => {});
    },
    async doDoel(row) {
      try {
        const params = new URLSearchParams();
        params.append("commodityId", row.commodityId); //
        const res = await delcommodity(params);
        if (res.code !== 200) return this.$message.error(res.msg);

        this.$message.success(res.msg);
          if (this.formInline.region == "null") {
             const res = await logincx(this.z)
           this.list = res.data.data
           return
           }
        this.loachonlist();
      } catch (e) {
        this.$message.error(e.msg);
      }
    },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachonlist();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachonlist();
    },
    formatEmployment(code) {
      return hireTypeMap[code];
    },
  },
};
</script>

<style scoped>
.accion {
  background-color: #fff;
  padding-left: 20px;
}
.el-select {
  width: 85%;
  margin-right: 20px;
}
.el-input {
  width: 100%;
  margin-right: 20px;
}
.el-image {
  width: 35px;
  height: 35px;
  margin-left: 10px;
}

.acctive:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.acctive:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.el-pagination {
  text-align: center;
}
.el-form-item {
  display: inline-block;
  width: 15%;
  margin-right: 20px;
}
.el-staye {
  background: #ff7144;
  border: 1px solid #ff7144;
  color: #fff;
}
.el-input__inner :focus {
  border-color: #ff7144;
}
.el-popover {
  width: 20px;
}
.mengbiyousi {
  color: #f1706d;
}
.el-popover__title {
  font-size: 14px;
}
.tailuo {
  transform: translateX(-15%);
}
</style>
